<template>
  <div class="menu-container">
    <el-button @click="handleAdd('_', '_', 'addmin')">添加主菜单</el-button>
    <el-table
      height="true"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="name"
        label="编辑菜单"
        >
      </el-table-column>
      <el-table-column
        prop="id"
        label="id"
        >
      </el-table-column>
      <el-table-column
        prop="parent_id"
        label="parent_id"
        >
      </el-table-column>
      <el-table-column
        prop="path"
        label="访问路径"
        >
      </el-table-column>
      <el-table-column
        prop="path_right"
        label="访问权限"
        >
      </el-table-column>
      <el-table-column label="操作" width="220px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleAdd(scope.$index, scope.row, 'add')">添加</el-button>
          <el-button
            size="mini"
            @click="handleAdd(scope.$index, scope.row, 'edit')">修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    

    <el-dialog
      :append-to-body="true"
      :title="type === 'edit' ? '修改菜单' : type === 'add' ? '新增菜单' : '添加主菜单'"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item style="width: 250px" label="id" prop="id">
            <el-input class="input" :disabled="type === 'edit' ? true : false" size="small" type="input" v-model="ruleForm.id"></el-input>
          </el-form-item>
          <el-form-item style="width: 250px" label="菜单名" prop="name">
            <el-input class="input" size="small" type="input" v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item style="width: 500px" label="访问路径">
            <el-input class="input" :disabled="type === 'addmin' ? true : false"  size="small" type="input" v-model="ruleForm.path"></el-input>
          </el-form-item>

          <el-form-item  label="访问权限" style="width: 200px">
            <el-select :disabled="type === 'addmin' ? true : false" v-model="path_right" multiple placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="width: 300px" label="介绍" prop="">
            <el-input class="input" size="small" type="input" v-model="ruleForm.remark"></el-input>
          </el-form-item>
          <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { addMenu, delMenu, uptMenu } from '../../../apis/menuApi'
import { userMenuApi } from '../../../apis/userApi';
  export default {

    data() {
      return {
        tableData: [],
        dialogVisible:false, // 控制窗口打开与显示,
        ruleForm:{
          "id": "",
          "seq": '',
          "parent_id": "",
          "name": "",
          "icon": "&#xe73f;",
          "path": "",
          "rights": "",
          "path_right": '',
          "show": 1,
          "remark": ""
        },
        options:[
          {label:'增加', value:'C'},
          {label:'删除', value:'D'},
          {label:'更新', value:'U'},
          {label:'查询', value:'R'},
        ],
        path_right:[],
        // 表单验证
        rules: {
          id:[
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          name:[
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          path:[
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ]
        },
        type:'add'
      }
    },
    created(){
      this.get()
    },
    methods: {
      get(){
        let _menu = this.$store.getters['common/menuList']

        function loop(_list, _id = null) {
          // 父亲节点
          let _nodes = _list.filter(_it => {
            if(_it.parent_id === ''){
                _it.parent_id = null
            }
              return _it.parent_id === _id

          })
          // 查找子节点
          return _nodes.map(_item => {
            let _idx = _list.findIndex(_it => _it.parent_id === _item.id)
            if (_idx > -1) {
                _item.children = loop(_list, _item.id)
            } else {
                _item.children = []
            }
            return _item
          })
        }
        let _list = loop(_menu)
        this.tableData = (_list)
      },

      handleAdd(index, row, type) {
        console.log(index, row, type);
        this.type = type

        if(type === 'edit'){
          let a = []
          a = row.path_right?.split('')
          this.path_right = a
          this.ruleForm.id = row.id
          this.ruleForm.seq = '888'
          this.ruleForm.parent_id = row.parent_id
          this.ruleForm.name = row.name
          this.ruleForm.icon = row.icon
          this.ruleForm.path = row.path
          this.ruleForm.rights = row.rights
          this.ruleForm.path_right = row.path_right
          this.ruleForm.show = row.show
          this.ruleForm.remark = row.remark
          this.dialogVisible = true
        }else if(type === 'add'){
          this.ruleForm.parent_id = row.id
          this.ruleForm.seq = row.seq + 1
        }
        this.dialogVisible = true
      },

      handleDelete(index, row) {
        console.log(index, row);
        delMenu(row.id).then(res => {
          if(res.code === 200){
            this.$message.success('删除成功')
            this.a()
          }
        })
      },

      // 关闭对话框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.$refs['ruleForm'].clearValidate()
            this.ruleForm = {
              "id": "",
              "seq": '888',
              "parent_id": "",
              "name": "",
              "icon": "&#xe73f;",
              "path": "",
              "rights": "",
              "path_right": '',
              "show": 1,
              "remark": ""
            },
            done();
          })
          .catch(_ => {});
      },
      a(){
        userMenuApi().then(res => {
          this.$store.commit('common/mutationMenuList',res.data.rows)

          sessionStorage.setItem('routes',JSON.stringify(res.data.rows))

          this.get()
        })
      },
      // 提交
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.path_right = ''
            this.path_right?.forEach(it => {
              this.ruleForm.path_right += it
            })
            if(this.type === 'edit'){
              uptMenu(this.ruleForm).then(res => {
                if(res.code === 200){
                  this.$message.success('修改菜单成功')
                  this.a()
                  this.ruleForm = {
                    "id": "",
                    "seq": '888',
                    "parent_id": "",
                    "name": "",
                    "icon": "&#xe73f;",
                    "path": "",
                    "rights": "",
                    "path_right": '',
                    "show": 1,
                    "remark": ""
                  },
                  this.path_right = ''
                  this.dialogVisible = false
                }
              })
            }else if(this.type === 'add'){
              addMenu(this.ruleForm).then(res => {
                if(res.code === 200){
                  this.$message.success('添加菜单成功')
                  this.a()
                  this.ruleForm = {
                    "id": "",
                    "seq": '888',
                    "parent_id": "",
                    "name": "",
                    "icon": "&#xe73f;",
                    "path": "",
                    "rights": "",
                    "path_right": '',
                    "show": 1,
                    "remark": ""
                  },
                  this.path_right = ''
                  this.dialogVisible = false
                }
              })
            }else{
              // 添加主菜单
              console.log('我要添加主要菜单');
              console.log(this.ruleForm);
              addMenu(this.ruleForm).then(res => {
                if(res.code === 200){
                  this.$message.success('添加主菜单成功')
                  this.a()
                  this.ruleForm = {
                    "id": "",
                    "seq": '888',
                    "parent_id": "",
                    "name": "",
                    "icon": "&#xe73f;",
                    "path": "",
                    "rights": "",
                    "path_right": '',
                    "show": 1,
                    "remark": ""
                  },
                  this.path_right = ''
                  this.dialogVisible = false
                }
              })
            }
            
          } else {
            console.log('取消提交');
            return false;
          }
        });
      },
    }
  };
</script>

<style lang="less" scoped>
  .menu-container{
    width: calc(100% - 32px);
    height: calc(100% - 57px - 32px - 40px);
    padding: 16px;
    > .el-table{
      height: 100%;
    }
  }
  .el-form-item{
    display: inline-block;
  }
</style>